<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务载荷整机型号" prop="model">
            <el-input v-model="form.model" placeholder="例：M300 RTK" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="推重比" prop="thrustWeight">
            <el-input-number
              v-model="form.thrustWeight"
              :precision="2"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最大起飞重量(kg)" prop="maxTakeoffWeight">
            <el-input-number
              v-model="form.maxTakeoffWeight"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负载能力(kg)" prop="payload">
            <el-input-number
              v-model="form.payload"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="电池寿命(min)" prop="batteryLife">
            <el-input-number
              v-model="form.batteryLife"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="控制精度(cm)" prop="controlAccuracy">
            <el-input-number
              v-model="form.controlAccuracy"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="最大平飞速度(m/s)" prop="maxSpeed">
            <el-input-number
              v-model="form.maxSpeed"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="通信距离(km)" prop="commDistance">
            <el-input-number
              v-model="form.commDistance"
              :min="0"
              controls-position="right"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" :rows="2" />
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">确 定</el-button>
      <el-button @click="$emit('cancel')">取 消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoEntryUAVAddMissionPayload',
  data() {
    return {
      form: {
        model: null,
        thrustWeight: null,
        maxTakeoffWeight: null,
        payload: null,
        batteryLife: null,
        controlAccuracy: null,
        maxSpeed: null,
        commDistance: null,
        remark: null
      },
      rules: {
        model: [{ required: true, message: '请输入整机型号', trigger: 'blur' }],
        thrustWeight: [{ required: true, message: '请输入推重比', trigger: 'blur' }],
        maxTakeoffWeight: [{ required: true, message: '请输入最大起飞重量', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 父组件弹窗打开时调用
    reset() {
      this.$refs.form.resetFields()
      this.form = this.$options.data().form
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        // 假数据：直接弹出结果
        this.$modal.msgSuccess('新增性能数据成功！')
        this.$emit('ok', { ...this.form }) // 抛给父组件
      })
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;   /* 靠右 */
  align-items: center;         /* 垂直居中（可选） */
}
</style>